<template>
  <div class="tools-app">
    <!-- 动态背景 -->
    <div class="dynamic-bg">
      <div class="bg-shape shape-1"></div>
      <div class="bg-shape shape-2"></div>
      <div class="bg-shape shape-3"></div>
      <div class="bg-shape shape-4"></div>
    </div>

    <!-- 头部 -->
    <header>
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <i class="fas fa-tools"></i>
            <span>3D工具大全</span>
          </div>
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input
              style="color: black"
              type="text"
              v-model="searchQuery"
              placeholder="搜索工具..."
              @input="handleSearch"
            />
          </div>
          <div class="user-actions">
            <div @click="login"><i class="fas fa-user"></i> 登录</div>
            <div><i class="fas fa-star"></i> 收藏</div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="container2">
      <div class="main-content">
        <!-- 侧边栏分类 -->
        <CategoryList
          :categories="categories"
          :selected-category="selectedCategory"
          :tools="filteredTools"
          @select-category="selectCategory"
        />

        <!-- 工具展示区 -->
        <div class="tools-section">
          <div class="section-header">
            <h2 class="section-title">
              <i class="fas fa-th-large"></i>
              {{ getCategoryName(selectedCategory) }}工具
              <span class="tools-count">({{ filteredTools.length }})</span>
            </h2>
            <div class="view-controls">
              <button
                :class="['view-btn', { active: viewMode === 'grid' }]"
                @click="viewMode = 'grid'"
              >
                <i class="fas fa-th"></i>
              </button>
              <button
                :class="['view-btn', { active: viewMode === 'list' }]"
                @click="viewMode = 'list'"
              >
                <i class="fas fa-list"></i>
              </button>
            </div>
          </div>

          <div v-if="filteredTools.length > 0" :class="['tools-container', viewMode]">
            <ToolCard
              v-for="tool in filteredTools"
              :key="tool.id"
              :tool="tool"
              :view-mode="viewMode"
              @open-tool="openTool"
              @mouseenter="handleCardHover(tool.id)"
              @mouseleave="handleCardLeave(tool.id)"
            />
          </div>
          <div v-else class="no-results">
            <i class="fas fa-search"></i>
            <p>没有找到相关工具</p>
            <button class="reset-btn" @click="resetFilters">重置筛选</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于我们</h3>
            <ul class="footer-links">
              <li><a href="#">网站介绍</a></li>
              <li><a href="#">团队介绍</a></li>
              <li><a href="#">联系方式</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>常用工具</h3>
            <ul class="footer-links">
              <li><a href="#">JSON格式化</a></li>
              <li><a href="#">Base64编码</a></li>
              <li><a href="#">时间戳转换</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>帮助支持</h3>
            <ul class="footer-links">
              <li><a href="#">使用教程</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">意见反馈</a></li>
            </ul>
          </div>
        </div>
        <div class="copyright">&copy; 2023 3D工具大全 - 提供便捷的在线工具服务</div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import CategoryList from '@/components/CategoryList.vue'
import ToolCard from '@/components/ToolCard.vue'
import { useRouter } from 'vue-router'
import { getInfo } from '@/api/index/login.js'
import JSOn from '@/assets/icon/json.png'
import base64 from '@/assets/icon/base64.png'
import date from '@/assets/icon/date.png'
import regular from '@/assets/icon/regular.png'
import md5 from '@/assets/icon/md5.png'
import code from '@/assets/icon/code.png'
import htmlCode from '@/assets/icon/htmlCode.png'
import cssCode from '@/assets/icon/cssCode.png'
import ip from '@/assets/icon/ip.png'
import url from '@/assets/icon/url.png'
import imgZIP from '@/assets/icon/imgZIP.png'
import color from '@/assets/icon/color.png'
import video from '@/assets/icon/video.png'
import videoImg from '@/assets/icon/videoImg.png'
import XML from '@/assets/icon/XML.png'
import sqlBinlog from '@/assets/icon/sqlBinlog.png'
import sqlExtract from '@/assets/icon/sqlExtract.png'
import SQL from '@/assets/icon/SQL.png'
import SHA from '@/assets/icon/SHA.png'
import JSONExcel from '@/assets/icon/JSONExcel.png'
import tellurion from '@/assets/icon/tellurion.png'
import lottery from '@/assets/icon/lottery.png'
import watermark from '@/assets/icon/watermark.png'
import BMI from '@/assets/icon/BMI.png'
import houseLoan from '@/assets/icon/houseLoan.png'
import All from '@/assets/icon/All.png'
import developmentTool from '@/assets/icon/developmentTool.png'
import text from '@/assets/icon/text.png'
import convert from '@/assets/icon/convert.png'
import encrypt from '@/assets/icon/encrypt.png'
import image from '@/assets/icon/image.png'
import network from '@/assets/icon/network.png'
import data from '@/assets/icon/data.png'
import interest from '@/assets/icon/interest.png'






// 视图模式
const viewMode = ref('grid')
const Router = useRouter()
// 分类数据
const categories = ref([
  { id: 'all', name: '全部工具', icon: All, color: '#8e44ad' },
  { id: 'dev', name: '开发工具', icon: developmentTool, color: '#3498db' },
  { id: 'text', name: '文本处理', icon: text, color: '#2ecc71' },
  { id: 'convert', name: '格式转换', icon: convert, color: '#e74c3c' },
  { id: 'image', name: '图片工具', icon: image, color: '#9b59b6' },
  { id: 'encrypt', name: '加密解密', icon: encrypt, color: '#f39c12' },
  { id: 'network', name: '网络工具', icon: network, color: '#1abc9c' },
  { id: 'data', name: '数据工具', icon: data, color: '#d35400' },
  { id: 'interest', name: '兴趣工具', icon: interest, color: '#7cfae4' }
])

// 工具数据
const tools = ref([
  { id: 1, name: 'JSON格式化', description: '在线格式化、验证和美化JSON数据', category: 'dev', icon: JSOn, popular: true, color: '#3498db', path: 'json' },
  { id: 2, name: 'Base64编码', description: 'Base64编码和解码工具', category: 'convert', icon: base64, popular: true, color: '#e74c3c', path: 'base' },
  { id: 3, name: '时间戳转换', description: '时间戳与日期时间相互转换', category: 'dev', icon: date, popular: true, color: '#3498db', path: 'date' },
  { id: 4, name: '正则表达式测试', description: '在线测试正则表达式', category: 'dev', icon: regular, color: '#3498db', path: 'regular' },
  { id: 5, name: 'MD5加密', description: '生成字符串的MD5哈希值', category: 'encrypt', icon: md5, color: '#f39c12', path: 'md' },
  { id: 6, name: '二维码生成器', description: '生成自定义二维码图片', category: 'image', icon: code, color: '#9b59b6', path: 'qrcode' },
  { id: 7, name: 'HTML格式化', description: '格式化HTML代码，提高可读性', category: 'text', icon: htmlCode, color: '#2ecc71', path: 'html' },
  { id: 8, name: 'CSS压缩', description: '压缩CSS代码，减小文件大小', category: 'dev', icon: cssCode, color: '#3498db', path: 'css' },
  { id: 9, name: 'IP查询', description: '查询IP地址的地理位置信息', category: 'network', icon: ip, color: '#1abc9c', path: 'ipsearch' },
  { id: 10, name: 'URL编码', description: '对URL进行编码和解码', category: 'network', icon: url, color: '#1abc9c', path: 'url' },
  { id: 11, name: '颜色选择器', description: '在线选择、生成颜色值', category: 'dev', icon: color, color: '#3498db', path: 'color' },
  { id: 12, name: '图片压缩', description: '在线压缩图片，减小文件大小', category: 'image', icon: imgZIP, color: '#9b59b6', path: 'imgCompress' },
  { id: 18, name: '视频格式转化', description: '在线视频转化', category: 'image', icon: video, color: '#9b59b6', path: 'video' },
  { id: 19, name: '视频截帧', description: '视频截帧', category: 'image', icon: videoImg, color: '#9b59b6', path: 'videImg' },
  { id: 13, name: 'XML格式化', description: '格式化XML文档，提高可读性', category: 'text', icon: XML, color: '#2ecc71' },
  { id: 14, name: 'SQL格式化', description: '格式化SQL语句，便于阅读和调试', category: 'data', icon: SQL, color: '#d35400', path: 'sqlFormatting' },
  { id: 20, name: 'SQL文件提取', description: '格式化SQL语句，便于阅读和调试', category: 'data', icon: sqlExtract, color: '#d35400', path: 'sql' },
  { id: 17, name: 'SQL日志转SQL文件', description: '一键将日志转为SQL文件，配合提取找回丢失文件', category: 'data', icon: sqlBinlog, color: '#d35400', path: 'sqlbin' },
  { id: 15, name: 'SHA加密', description: '多种SHA算法加密工具', category: 'encrypt', icon: SHA, color: '#f39c12', path: 'sha' },
  { id: 16, name: 'JSON转Excel', description: '将JSON数据转换为Excel格式', category: 'convert', icon: JSONExcel, color: '#e74c3c', path: 'josnex' },
  { id: 21, name: '地球仪', description: '地球仪查看地区', category: 'interest', icon: tellurion, color: '#7cfae4', path: 'tellurion' },
  { id: 22, name: '彩票随机', description: '彩票随机号码', category: 'interest', icon: lottery, color: '#7cfae4', path: 'lottery' },
  { id: 23, name: '图片增加水印', description: '图片增加水印', category: 'image', icon: watermark, color: '#7cfae4', path: 'watermark' },
  { id: 24, name: 'BMI 计算器', description: 'BMI 计算器', category: 'interest', icon: BMI, color: '#7cfae4', path: 'bmi' },
  { id: 24, name: '房贷计算', description: '房贷计算', category: 'interest', icon: houseLoan, color: '#7cfae4', path: 'housingMortgage' },
])

// 选中的分类
const selectedCategory = ref('all')

// 搜索查询
const searchQuery = ref('')

// 悬停的工具ID
const hoveredToolId = ref(null)

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(cat => cat.id === categoryId)
  return category ? category.name : '全部'
}
// 前往登录页面
const login = () => {
  Router.push('login')
}
// 打开工具
const openTool = (tool) => {
  Router.push(tool.path)
}

const getInfoFn = async () => {
  const res = await getInfo()
  console.log(res)
}
getInfoFn()
// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchQuery.value)
}

// 处理卡片悬停
const handleCardHover = (toolId) => {
  hoveredToolId.value = toolId
}

// 处理卡片离开
const handleCardLeave = () => {
  hoveredToolId.value = null
}

// 重置筛选
const resetFilters = () => {
  selectedCategory.value = 'all'
  searchQuery.value = ''
}

// 计算属性：过滤后的工具列表
const filteredTools = computed(() => {
  let result = tools.value

  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(tool => tool.category === selectedCategory.value)
  }

  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(tool =>
      tool.name.toLowerCase().includes(query) ||
      tool.description.toLowerCase().includes(query)
    )
  }

  return result
})

// 组件挂载后的逻辑
onMounted(() => {
  console.log('3D工具页面加载完成')
})
</script>

<style scoped>
.tools-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* 动态背景 */
.dynamic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 15s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.shape-2 {
  width: 200px;
  height: 200px;
  top: 20%;
  right: -100px;
  animation-delay: 3s;
}

.shape-3 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  left: 20%;
  animation-delay: 6s;
}

.shape-4 {
  width: 150px;
  height: 150px;
  bottom: 10%;
  right: 10%;
  animation-delay: 9s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(20px) rotate(240deg);
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.container2 {
  width: 100%;
}
/* 头部样式 */
header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  padding: 15px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.logo i {
  margin-right: 10px;
  font-size: 28px;
  color: #fff;
}

.search-box {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  outline: none;
  padding-left: 45px;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.search-box input:focus {
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  z-index: 2;
}
.user-actions {
  display: flex;
  cursor: pointer;
}
.user-actions div {
  color: white;
  text-decoration: none;
  margin-left: 15px;
  font-size: 14px;
  transition: opacity 0.3s;
  padding: 8px 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
}

.user-actions div:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 主内容区 */
.main-content {
  display: flex;
  margin-top: 30px;
  gap: 25px;
  flex: 1;
}

/* 工具区域 */
.tools-section {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-title {
  font-size: 26px;
  color: white;
  display: flex;
  align-items: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.section-title i {
  margin-right: 10px;
  color: #fff;
}

.tools-count {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 10px;
  font-weight: normal;
}

.view-controls {
  display: flex;
  gap: 10px;
}

.view-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.view-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.view-btn.active {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tools-container {
  transition: all 0.3s;
}

.tools-container.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.tools-container.list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.no-results {
  text-align: center;
  padding: 80px 20px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.no-results i {
  font-size: 60px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.no-results p {
  font-size: 20px;
  margin-bottom: 20px;
}

.reset-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 16px;
}

.reset-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* 底部 */
footer {
  margin-top: 60px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 40px 0 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  margin-bottom: 30px;
}

.footer-section h3 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #bbdefb;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #bbdefb;
}

.copyright {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #b0bec5;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }

  .tools-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }

  .logo {
    margin-bottom: 15px;
  }

  .search-box {
    margin: 15px 0;
    max-width: 100%;
  }

  .tools-container.grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .view-controls {
    align-self: flex-end;
  }
}
</style>